<template>
	<view v-if="pageShow">
		<view class="block">
			<view class="xiaobai ershiba">账户余额</view>
			<view class="xiaobai fonweight margin_top2" style="font-size: 60rpx;">{{userInfo.money}}元</view>
		</view>
		<view class="mainpadding ffffff block2">
			<view class="zhonghei ershiba fonweight">选择充值金额</view>
			<view class="flexleft flex_wrap">
				<view class="sanshis flexcenter margin_top" v-for="item in list" :key="item.id"
					@click="price=item.price">
					<view class="flexcenter" :class="Number(price)==Number(item.price)?'yxzbtn':'wxzbtn'">
						{{item.price}}元</view>
				</view>
			</view>
			<view class="input margin_top">
				<input class="" placeholder="自定义充值金额" type="number" v-model="price" />
			</view>
		</view>
		<view class="gudingdb mainpadding ">
			<view class="bigbtn flexcenter" @click="chongzhi">立即充值</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				userInfo: {},
				pageShow: false,
				list: [
					{
						id:1,
						price:10
					},
					{
						id:2,
						price:50
					},
					{
						id:3,
						price:100
					},
					{
						id:4,
						price:500
					},
					{
						id:5,
						price:800
					},
					{
						id:6,
						price:1000
					}
				],
				price: ""
			}
		},
		onShow() {
			this.userinfomsg()
		},
		methods: {
			chongzhi() {
				if(Number(this.price)==""){
					httpRequest.toast("请输入充值金额")
					return false
				}
				httpRequest.request('/api/Rechargecl/rechargeMoney', 'POST', {
					price:this.price
				}).then(res => {
					if(res.code==1){
						let data = JSON.parse(res.data.wxconfig)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								// 支付成功
								uni.navigateBack(1)
							},
							fail: function(err) {
								// 支付失败
								_this.paycatchresult = true
							}
						});
					}else{
						httpRequest.toast(res.msg)
					}
					
				})
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					this.pageShow = true
				})
			},
			// 跳转充值记录
			tzczj() {
				uni.navigateTo({
					url: '/pages_wode/chongzhijl'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		background: #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		padding: 30rpx;
	}

	.wxzbtn {
		width: 178rpx;
		height: 105rpx;
		background: #F6F6F6;
		font-size: 36rpx;
		font-family: DIN Next LT Pro, DIN Next LT Pro;
		font-weight: 400;
		color: #000000;
		border: 2rpx solid #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.yxzbtn {
		width: 178rpx;
		height: 105rpx;
		background: #ffefe6;
		font-size: 36rpx;
		font-family: DIN Next LT Pro, DIN Next LT Pro;
		font-weight: 400;
		color: #FF5C00;
		border: 2rpx solid #FF5C00;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.ljcz {
		width: 328rpx;
		height: 76rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		background-color: #FF7510;
		border: 2rpx solid #FF7510;
		border-radius: 6rpx;
		color: #FFFFFF;
	}

	.czbtn {
		width: 328rpx;
		height: 76rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		background-color: #fff2e8;
		border: 2rpx solid #FF7510;
		border-radius: 6rpx;
		color: #FF7510;
	}

	.input {
		background: #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		padding: 30rpx;
	}

	.block2 {
		border-radius: 16rpx 16rpx 0 0;
		position: relative;
		top: -20rpx;
	}

	.block {
		padding: 40rpx 30rpx 40rpx;
		background-color: #ff9341;
	}
</style>